<template>
    <el-drawer
      v-model="visible"
      :title="drawerTitle"
      direction="rtl"
      size="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        label-width="80px"
        :disabled="!isEdit"
        ref="formRef"
      >
        <el-form-item label="公告标题" prop="title" :rules="[{ required: true }]">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="公告内容" prop="content" :rules="[{ required: true }]">
          <el-input v-model="formData.content" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item v-if="isEdit">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import type { FormInstance } from 'element-plus'
  
  interface Props {
    modelValue: boolean
    formData: Partial<Notice>
    isEdit: boolean
  }
  
  const props = defineProps<Props>()
  const emit = defineEmits(['update:modelValue', 'submit'])
  
  const formRef = ref<FormInstance>()
  const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })
  
  const drawerTitle = computed(() => {
    return props.isEdit ? '新增或编辑公告' : '查看公告'
  })
  
  const submitForm = async () => {
    try {
      await formRef.value?.validate()
      emit('submit', props.formData)
      visible.value = false
    } catch (e) {
      console.log('表单验证失败')
    }
  }
  
  const handleClose = () => {
    visible.value = false
  }
  </script>
  
  <style lang="scss" scoped>
  .el-drawer {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  
    .el-form {
      padding: 0 20px;
  
      :deep(.el-form-item__label) {
        color: #409eff;
      }
  
      .el-input, .el-textarea {
        transition: all 0.3s ease;
        &:focus-within {
          box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
        }
      }
    }
  }
  
  .el-drawer__header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    color: #409eff;
  }
  </style>